<template>
  <div>
    <div class="bg-light-2" style="height:.12rem"></div>
    <div class="card bg-white px-3">
      <div class="card-header d-flex py-3 mb-2">
        <i class="sprite mt-1 px-1" :class="`sprite-${icon}`"></i>
        <div class="fs-md flex-grow-1 mt-1 px-1" style="font-weight:bold">{{title}}</div>
        <i class="sprite sprite-menu1 mt-2 px-1"></i>
      </div>
      <div class="card-body">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    title: { type: String, required: true },
    icon: { type: String, required: true }
  }
};
</script>
<style lang="scss" scoped>
@import "../assets/_variables.scss";
.card {
  box-sizing: border-box; 
  .card-header {
    box-sizing: border-box;
    border-bottom: 1px solid $border-color;
  }
}
</style>



